<template>
  <div
    class="add-detail"
    :style="{ backgroundColor: path === 'addDetail' ? '#f2f2f2' : '#fff' }"
  >
    <nav-bar class="nav-bar">
      <div class="center" slot="center">{{ navBarCenter }}</div>
    </nav-bar>
    <section class="search">
      <div class="input">
        <input
        type="text"
        placeholder="请输入小区/写字楼/学校等"
        v-model="keyword"
      />
      <span class="cross-sign" v-show="keyword.trim()" @click="handelEmptyKeyWord">x</span>
      </div>
      <input
        type="button"
        :value="btnContent"
        class="confirm"
        @click="handleSearchNearby"
      />
    </section>
    <section class="address">
      <div class="header" v-if="path === 'addDetail'">
        为了满足商家的送餐要求，建议您从列表中选择地址
      </div>
      <div class="main-not-found" v-show="!isShow">
        <p>找不到地址？</p>
        <p>请尝试输入小区、写字楼或学校名</p>
        <p>详细地址（如门牌号）可稍后输入哦。</p>
      </div>
      <scroll class="scroll">
        <div class="main" v-show="isShow">
          <div
            class="list-item"
            v-for="(item, index) in nearby"
            :key="index"
            @click="handleNewAddress(item)"
          >
            <p
              class="name"
              :style="{ color: path === 'addDetail' ? '#b0b0b0' : '#555555' }"
            >
              {{ item.name }}
            </p>
            <p>{{ item.address }}</p>
          </div>
        </div>
      </scroll>
    </section>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import NavBar from "components/common/navbar/NavBar";

export default {
  data() {
    return {
      keyword: "",
      nearby: [],
      isShow: false,
    };
  },
  props: {
    path: {
      type: String,
      defult: "addDetail",
    },
    navBarCenter: {
      type: String,
      default: "",
    },
    btnContent: {
      type: String,
      default: "",
    },
    address: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.$bus.$on("nearby", (res) => {
      this.nearby = res;
      this.isShow = this.nearby.length > 0 ? true : false;
    });
  },
  activated() {
    this.isShow = false;
  },
  watch: {
    address(value) {
      this.keyword = value;
    },
  },
  methods: {
    handleSearchNearby() {
      this.keyword.trim()
        ? this.$bus.$emit("handleSearchNearby", this.keyword)
        : "";
    },
    handleNewAddress(item) {
      this.$bus.$emit("handleNewAddress", item);
      this.$router.go(-1);
    },
    handelEmptyKeyWord() {
      this.keyword = ''
    }
  },
  components: {
    Scroll,
    NavBar,
  },
};
</script>
<style lang="less" scoped>
.add-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f2f2f2;
  .search {
    display: flex;
    padding: 10px;
    background-color: #fff;
    font-size: 15px;
    .input {
      flex: 1;
      position: relative;
      padding: 10px;
      border: 1px solid #e4e4e4;
      border-radius: 5px;
      margin-right: 10px;
      background-color: #f2f2f2;
      input {
      background-color: #f2f2f2;
      }
      .cross-sign {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
      }
    }
    .confirm {
      padding: 0 20px;
      border: none;
      border-radius: 5px;
      background-color: #3199e8;
      color: #fff;
    }
  }
  .address {
    height: calc(100% - 44px - 59px);
    position: relative;
    .header {
      text-align: center;
      padding: 5px;
      background-color: #fff6e4;
      font-size: 14px;
      color: #ff883f;
    }
    .main-not-found {
      position: absolute;
      top: 40%;
      right: 0;
      left: 0;
      text-align: center;
      color: #969696;
      transform: translateY(-50%);
      p {
        padding-top: 10px;
      }
    }
    .scroll {
      height: 100%;
      overflow: hidden;
      .main {
        .list-item {
          padding: 15px;
          border-bottom: 2px solid #e2e2e2;
          font-size: 14px;
          color: #b0b0b0;
          .name {
            margin-bottom: 15px;
          }
        }
      }
    }
  }
}
</style>